<template>
  <div class="merchantsList">
    <div class="zhezao" v-if="loadingShow">
      <i class="el-icon-loading" />数据加载中...
    </div>
    <div class="top">
      <div class="first_box pad">
        <el-input placeholder="请输入内容" v-model="filter.query" class="input-with-select">
          <el-select v-model="filter.queryId" slot="prepend" placeholder="请选择" @change="select">
            <el-option v-for="item in queryList" :key="item.id" :label="item.value" :value="item.id">
            </el-option>
          </el-select>
        </el-input>
      </div>
      <!-- <div class="time pad">
        <span class="label">行业类型：</span>
        <el-select v-model="filter.industry" placeholder="请选择">
          <el-option
            v-for="item in industryStatusType"
            :key="item.id"
            :label="item.value"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </div> -->
      <div class="time pad">
        <span class="label">行业类型：</span>
        <el-cascader :props="{ checkStrictly: true }" :options="typeLs" @change="handleChange" v-model="shopType">
        </el-cascader>
      </div>
      <!-- <div class="time pad">
				<span class="label">审核状态：</span>
				<el-select v-model="filter.applyStatus" placeholder="请选择">
					<el-option
						v-for="item in statusList"
						:key="item.id"
						:label="item.value"
						:value="item.id">
					</el-option>
				</el-select>
			</div> -->
      <!-- <div class="time pad">
        <span class="label">关联资金账户：</span>
        <el-select v-model="filter.thirdMerchantNo" placeholder="请选择">
          <el-option
            v-for="item in AccountList"
            :key="item.id"
            :label="item.merchantName"
            :value="item.merchantNo"
          >
          </el-option>
        </el-select>
      </div> -->
      <div class="time pad">
        <span class="label">注册状态：</span>
        <el-select v-model="filter.type" placeholder="请选择">
          <el-option v-for="item in registerLs" :key="item.id" :label="item.value" :value="item.id">
          </el-option>
        </el-select>
      </div>
      <div class="time pad">
        <span class="label">商户级别：</span>
        <el-select v-model="filter.merchantLevel" placeholder="请选择">
          <el-option v-for="item in merchantLevelList" :key="item.id" :label="item.value" :value="item.id">
          </el-option>
        </el-select>
      </div>
      <div class="time pad">
        <span class="label">商家来源：</span>
        <el-select v-model="filter.source" placeholder="请选择">
          <el-option v-for="item in sourceList" :key="item.id" :label="item.value" :value="item.id">
          </el-option>
        </el-select>
      </div>
      <div class="time pad">
        <span class="label">管辖区域：</span>
        <el-select v-model="filter.areaId" placeholder="请选择">
          <el-option v-for="item in areaSelect" :key="item.id" :label="item.value" :value="item.id">
          </el-option>
        </el-select>
      </div>
      <div class="time pad">
        <span class="label">邀请人：</span>
        <el-select v-model="filter.referrer" placeholder="请选择">
          <el-option v-for="item in referrerList" :key="item.id" :label="item.value" :value="item.id">
          </el-option>
        </el-select>
      </div>
      <div class="time pad">
        <span class="label">前端显示：</span>
        <el-select v-model="showType" placeholder="请选择" multiple @change="changeShowType">
          <el-option v-for="item in showList" :key="item.id" :label="item.value" :value="item.id">
          </el-option>
        </el-select>
      </div>
      <div class="time pad">
        <span class="label">时间：</span>
        <el-date-picker v-model="date" type="daterange" value-format="yyyy-MM-dd" size="small" range-separator="至" @change="getTime"
          start-placeholder="开始日期" end-placeholder="结束日期" >
        </el-date-picker>
      </div>
      
      <div class="btn pad">
        <el-button @click="setReset">重置</el-button>
        <el-button type="primary" @click="search">查询</el-button>
      </div>
    </div>
    <div class="main">
      <div class="main_top">
        <div class="lef">
          <div class="" v-for="item in type" :class="['list', currentNavtab == item.id ? 'active' : '']" :key="item.id"
            :value="item.id" @click="handleTab(item.id)">
            {{ item.value }} <span>({{ item.num }})</span>
          </div>
        </div>
        <!-- <el-button type="primary" icon="el-icon-upload">导出</el-button> -->
        <div>
          <!-- <el-button type="primary" @click="establishShop">创建店铺</el-button>
          <el-button type="primary" @click="jumpAdd">+ 导入店铺信息</el-button> -->
          <export-excel-button title="商家列表" action="/merchant/v1/userDetail/export" :params="ExportParams" />
        </div>
      </div>
      <ex-table ref="table" 
        :table-column="tableColumn" :table-data="tableData" @pageSizeChange="handleSizeChange"
        @currentPageChange="handleCurrentChange">
        
        <template v-slot:source="{ scope }">
          <dict-tag :options="sourceList" :value="scope.row.source" /> 
        </template>
        <template v-slot:shopStatus="{ scope }">
            <el-switch
              v-model="scope.row.shopStatus"
              active-value="1"
              inactive-value="2"
              :disabled="scope.row.merchantLogoutId.length > 1 ? true : false"
              @change="changeShopStatus($event,scope.row.id)"
              >
            </el-switch>
        </template>
        <template v-slot:shenyeShopStatus="{ scope }">
          <el-switch
            v-model="scope.row.shenyeShopStatus"
            active-value="1"
            inactive-value="2"
            :disabled="(scope.row.status == '-' || scope.row.merchantLogoutId.length > 1) ? true : false"
            @change="changeShenyeShopStatus($event,scope.row.id)">
          </el-switch>
        </template>
        <template v-slot:operate="{ scope }">
          <el-button @click="lookDetail(scope.row)" size="small">店铺详情</el-button>
          <el-button size="small" style="margin-top: 10px" @click="jumpMarchantAdmin(scope.row.id)"
            v-if="scope.row.type=='1' && scope.row.merchantPc == 1 && scope.row.merchantLogoutId.length == 1" :loading="merchantLoading">进入商家后台</el-button>
        </template>
      </ex-table>
    </div>
    <detail-dialog v-if="detailDialog" :id="id" :visible.sync="detailDialog" @success="_handleSuccess" />
    <detail-dialog-report v-if="detailDialog2" :id="id" :visible.sync="detailDialog2" @success="_handleSuccess" />
    <puchCard-dialog v-if="detailDialog3" :id="id" :visible.sync="detailDialog3" @success="_handleSuccess" />
    <puchCard-dialog v-if="detailDialog3" :id="id" :visible.sync="detailDialog3" @success="_handleSuccess" />
    <inviter-dialog v-if="inviterDialog" :id="id" :referrer="referrer" :visible.sync="inviterDialog"
      @success="_handleInviterSuccess" />
    <region-dialog v-if="regionDialog" :id="merchatId" :shopId="shopId" :type="typeStatus" :fromBase="fromBase"
      :visible.sync="regionDialog" @success="_handleSuccess" />
  </div>
</template>
<script>
  import {
    mapState
  } from "vuex";
  // components
  import DetailDialog from "./components/merchantsList/DetailDialog";
  import DetailDialogReport from "./components/merchantsList/DetailDialogReport";
  import puchCardDialog from "./components/merchantsList/puchCardDialog";
  import inviterDialog from "./components/merchantsList/inviterDialog";
  import regionDialog from "./components/merchantsList/regionDialog";
  import ExportExcelButton from "@/components/ExportExcelButton/index";
  // api
  import {
    getList,
    getAdminGetAuditNumber,
    merchantFundAccountList,
    shopTypeTree,
    setshopStatus,
    getDelete,
    merchantRedirect,
    syShopStatus,
    kyyShopStatus,
  } from "@/api/merchants";
  import {
    referrer,
  } from "@/api/merchants/merchantsAudit";
  import {
    userAreaSelect,
  } from "@/api/common";
  import {
    setTokenMarchant
  } from '@/utils/auth'
  // mixins
  import handlePageMixin from "@/mixins/handlePageMixin";

  export default {
    name: "NewIncreaseVerify",
    components: {
      DetailDialog,
      ExportExcelButton,
      puchCardDialog,
      DetailDialogReport,
      inviterDialog,
      regionDialog,
    },
    mixins: [handlePageMixin],
    computed: {
      ...mapState({
        statusList: function (state) {
          return state.common["merchant_apply_status"]; // 要取this的实例，只能用不同函数，不能用箭头函数
        },
        industryStatusType: function (state) {
          return state.common["industry_type"]; // 要取this的实例，只能用不同函数，不能用箭头函数
        },
        shopTypeList: function (state) {
          return state.common["merchant_shop_status"]; // 要取this的实例，只能用不同函数，不能用箭头函数
        },
      }),
      ExportParams() {
        const {
          id: ticketId
        } = this;
        const params = {
          ...this.pageOptions,
          ...this.filter,
        };
        return params;
      },
    },
    data() {
      return {
        loadingShow: false,
        value: [],
        showType: [],
        date: [],
        shopType: "",
        loading: false,
        detailDialog2: false,
        detailDialog3: false,
        inviterDialog: false,
        regionDialog: false,
        merchantLoading: false, //跳转商家后台loding
        sourceList: [],
        showList: [
          {id: '1',value: '卡优优'},
          {id: '2',value: '神椰'},
        ],
        queryList: [{
            id: "1",
            value: "商户编号"
          },
          {
            id: "2",
            value: "商户账号名称"
          },
          {
            id: "3",
            value: "店铺名称"
          },
          // { id: "4", value: "关联资金账户" },
          {
            id: "5",
            value: "邀请人"
          },
        ],
        type: [{
            id: 0,
            value: "全部",
            num: ""
          },
          {
            id: 1,
            value: "正常",
            num: 0
          },
           {
            id: 6,
            value: "待使用",
            num: 0
          },
          {
            id: 2,
            value: "黑名单",
            num: 0
          },
          {
            id: 5,
            value: "异常",
            num: 0
          },
          {
            id: 7,
            value: "已注销",
            num: 0
          },
        ],
        registerLs: [{
            id: "",
            value: "全部"
          },
          {
            id: "1",
            value: "正常"
          },
          {
            id: "2",
            value: "待使用 "
          },
        ],
        referrerList: [],//邀请人列表
        merchantLevelList: [
          {id: '',value: '全部'},
          {id: '1',value: '未使用商家'},
          {id: '2',value: '合作商家'},
          {id: '3',value: '普通商家'},
          {id: '4',value: '诚信商家'},
          {id: '5',value: '金牌商家'},

        ],
        sourceList: [
          {id: '',value: '全部'},
        ],
        tableColumn: [{
            prop: "govAreaName",
            label: "管辖区域",
            width: "130"
          },
          {
            prop: "id",
            label: "商户编号"
          },
          {
            prop: "merchantArea",
            label: "地区",
            width: "150"
          },
          {
            prop: "merchantName",
            label: "商户账号名称",
            width: "200"
          },
          {
            prop: "shopName",
            label: "店铺名称",
            width: "150"
          },
          {
            prop: "phone",
            label: "联系手机号",
            width: "200"
          },
          {
            prop: "shopTypeName",
            label: "行业类型",
            width: "150"
          },
          {
            prop: "typeDict",
            label: "注册状态",
            width: "150"
          },
          // {
          //   prop: "shopStatusDict",
          //   label: "店铺上架状态",
          //   width: "150"
          // },
          {
            prop: "createTime",
            label: "创建时间",
            width: "180"
          },
          {
            prop: "merchantLevel",
            label: "商户级别",
            width: "180"
          },
          {
            slot: true,
            slotName: "source",
            label: "商户来源",
          },
          {
            slot: true,
            slotName: "shopStatus",
            label: "卡优优端显示",
            width: "120"
          },
          {
            slot: true,
            slotName: "shenyeShopStatus",
            label: "神椰端显示",
            width: "120"
          },
          {
            label: "操作",
            slot: true,
            slotName: "operate",
            width: "250",
            fixed: "right",
          },
        ],
        
        
        filter: {
          areaId: "", //区域
          queryId: "", //查询内容id（1-商家编号 2-商户名称 3-店铺名称 4-资产名称）
          query: "", //查询内容字符串
          shopTypeParent:'',//行业类型一级
          shopType: "",//行业类型二级
          // thirdMerchantNo: "",
          shopStatus: "", //店铺状态
          referrer: "", //邀请人
          type: "", //注册状态  1 正常  2 待使用
          merchantLevel: '',//商户级别
          showType: '',//显示类型 1卡优优 2 神椰 3 两个都勾选
          source: '',
          status:'',//
          startDate: '',
          endDate: '',
        },
        tableData: [],
        currentNavtab: 0,
        detailDialog: false,
        normal: "",
        blacklist: "",
        isShow: true,
        AccountList: [], //关联资金账户查询列表
        // industryStatusType: [],//行业字典
        typeLs: [],
        id: "",
        merchatId: "",
        shopId: "",
        typeStatus: "", //注册状态  1 正常  2 待使用
        referrer: "",
        fromBase: {}, //传到子组件的数据
        areaSelect: [], //区域下拉
        cityOptions:[],//地区下拉
        cityValue:"",//选中的地区数据
      };
    },

    created() {
      this.getDict()
      this.getReferrer();
      this.getTypels();
      this.getUserAreaSelect();
      this.getmerchantFundAccountList();
      this.getList();
      this.getNum();
    },
    methods: {
      getTime(e){
        this.filter.startDate = e[0]
        this.filter.endDate = e[1]
      },
      //获取邀请人下拉
      getReferrer(){
        var params = {}
        referrer(params).then(res => {
          this.referrerList = res.result
        })
      },
      getUserAreaSelect() {
        //查询用户区域下拉框
        userAreaSelect().then((res) => {
          var arr = [{
            id: "",
            value: "全部",
          }, ];
          this.areaSelect = arr.concat(res.result);
        });
      },
      //获取字典
      getDict() {
        console.log("hahahah");
        var dictType = "merchant_register_source";
        this.$getSelectList(dictType)
          .then((res) => {
            this.sourceList = this.sourceList.concat(res.result[0].dictList);
          })
          .finally(() => {
            this.loading = false;
          });
      },
      changeShowType(e){
        console.log(e)
        if(e.length == 2){
          this.filter.showType = 3
        }else{
          this.filter.showType = e[0]
        }
      },
      getTypels() {
        //shopTypeTree
        this.loading = true;
        shopTypeTree()
          .then((res) => {
            let ls = [];
            // console.log("res.result+++", res.result);
            ls = this.getTreeData(res.result);
            // console.log(this.typeLs)
            let ls1 = ls.map((item) => {
              item.value = item.id;
              item.children.map((items) => {
                items.value = items.id;
              });
              return item;
            });
            // console.log("ls1+++", ls1);
            this.typeLs = ls1;
          })
          .finally(() => {
            this.loading = false;
          });
      },
      getTreeData(data) {
        // 循环遍历json数据
        for (var i = 0; i < data.length; i++) {
          if (data[i].children.length < 1) {
            // children若为空数组，则将children设为undefined
            // data[i].children=undefined;
            delete data[i].children;
          } else {
            // children若不为空数组，则继续 递归调用 本方法
            this.getTreeData(data[i].children);
          }
        }
        return data;
      },
      //行业选择
      handleChange(value) { 
        let _this = this;
        console.log(value);
        if (value.length == 2) {
          _this.filter.shopType = value[1];
          _this.filter.shopTypeParent = value[0];
        } else {
          _this.filter.shopTypeParent = value[0];
          _this.filter.shopType = '';
        }
      },
      //获取资金账户列表
      getmerchantFundAccountList() {
        this.loading = true;
        merchantFundAccountList()
          .then((res) => {
            this.AccountList = res.result;
            // console.log(this.AccountList);
            if (this.AccountList.length != 0) {
              var arr = [{
                // id: "",
                merchantName: "全部",
              }, ];
              this.AccountList = arr.concat(this.AccountList);
            } else {}
          })
          .finally(() => {
            this.loading = false;
          });
      },
      setRegion(e) {
        //设置区域
        this.merchatId = e.id;
        this.shopId = e.shopId;
        this.typeStatus = e.type;
        let from = {
          area: e.area,
          city: e.city,
          province: e.province,
        };
        console.log("from", from);
        this.fromBase = from;
        this.regionDialog = true;
      },
      //审核
      getAudit(id) {
        this.id = id;
        this.detailDialog = true;
      },
      //重新报备
      geReport(id) {
        this.id = id;
        this.detailDialog2 = true;
      },
      puchCard(id) {
        //发体验卡
        this.id = id;
        this.detailDialog3 = true;
      },
      getDelete(shopId) {
        //删除
        this.$confirm("是否删除?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then(() => {
            getDelete(shopId)
              .then((res) => {
                const {} = res.result;
                this.$message({
                  message: "删除成功",
                  type: "success",
                  duration: 1500,
                });
                setTimeout(() => {
                  this.getList();
                }, 1000);
              })
              .finally(() => {
                this.loading = false;
              });
          })
          .catch(() => {});
      },
      //查看详情
      lookDetail(e) {
        let id = e.id;
        if (id == "-") {
          id = "";
        }
        if (e.type == 1) {
          var query ={id: id,type: e.type, shopManageId: e.shopManageId }
          if(e.merchantLogoutId.length > 1){
            query.cancelAudit = 1 
          }
          console.log('e.status--'+e.status)
          //跳转已入驻商家
          this.$router.push({
            path: "/merchants/merchants-detail",
            query: query
          });
        } else {
          ////跳转未入驻商家
          this.$router.push({
            path: "/clientManagement/shopDetail",
            query: {
              id: e.id,
              type: e.type,
            },
          });
        }
      },
      establishShop() { //创建店铺
        this.$router.push({
          path: "/merchants/establish-shop",
          query: {},
        });
      },
      jumpAdd() {
        //跳转新增店铺信息
        this.$router.push({
          path: "/clientManagement/newlyBuild",
          query: {
            pathType: 'MerchantsList'
          },
        });
      },
      jumpMarchantAdmin(id) { //跳转商家后台
        console.log('process.env.VUE_APP_MERCHANTS', process.env.VUE_APP_MERCHANTS)
        this.merchantLoading = true
        let params = {
          merchantId: id
        }
        merchantRedirect(params)
          .then((res) => {
            // setTokenMarchant(res.result.token)
            setTimeout(() => {
              // let url = 'http://192.168.0.100:9528/home' + '?token=' + res.result.token
              let url = process.env.VUE_APP_MERCHANTS + '?token=' + res.result.token
              window.open(url, 'target');
              this.merchantLoading = false
            }, 700);
          })
          .finally(() => {
            setTimeout(() => {
              this.merchantLoading = false
            }, 1000);
          });
        // setTokenMarchant(
        //   'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJkYXRhIjoiNWtFNFhXRS82VDE2WWtlVHdqZHVRRmFRQ1RYdVIyNVRERlliVmwvcy91cldUbnpsNFVZVm1oZXpVTis5Y3hkUiJ9.6joZbW8mtkQSNT4iiUmONzPdBVocwsHUkxNQtqFFUNU'
        //   )
        // let url = 'http://192.168.0.105:9529/home?token=' + '1212123'
        // window.open(url, 'target');
      },
      select(value) {
        console.log("select", value);
      },
      //切换选项
      handleTab(id) {
        console.log("id", id), (this.currentNavtab = id);
        if (id == 1) {
          this.filter.status = 1;
        } else if (id == 2) {
          this.filter.status = 2;
        } else if (id == 3) {
          this.filter.status = 3;
        } else if (id == 4) {
          this.filter.status = 4;
        } else if (id == 5) {
          this.filter.status = 5;
        } else if (id == 6) {
          this.filter.status = 6;
        } else if (id == 7) {
          this.filter.status = 7;
        }  else {
          this.filter.status = "";
        }
        this.pageOptions.pageNum = 1;
        this.$refs.table.pageOptions.pageNum = 1;
        this.getList();
      },
      //列表
      getList() {
        this.loading = true;
        this.loadingShow = true
        const params = {
          ...this.pageOptions,
          ...this.filter,
        };
        getList(params)
          .then((res) => {
            const {
              total,
              records
            } = res.result;
            records.forEach((item) => {
              item.industry = this.$getStatusText("industry_type", item.industry);
              if (item.cityName != "") {
                item.region =
                  item.provinceName + "-" + item.cityName + "-" + item.areaName; //处理地区
              } else {
                item.region = "-";
              }
              //处理注册状态
              if (item.type == 1) {
                item.typeDict = "正常";
              } else if (item.type == 2) {
                item.typeDict = "待使用";
              } else {
                item.typeDict = "-";
              }
              //判断是否为空，为空展示-
              for (var key in item) {
                if (!item[key]) {
                  item[key] = "-";
                }
              }
              if (item.applyStatus == 1) {
                item.isShow = true;
              } else {
                item.isShow = false;
              }
            });
            this.$refs.table.pageOptions.total = total;
            this.tableData = records;
          })
          .finally(() => {
            this.loading = false;
            this.loadingShow = false
          });
      },
      //查询审核条数
      getNum() {
        this.loading = true;
        var params = {
          // queryId: this.filter.queryId,
          // query: this.filter.query,
          // shopType: this.filter.shopType,
          // shopStatus: this.filter.shopStatus,
          // type: this.filter.type,
          // areaId: this.filter.areaId,
          // source: this.filter.source,
          // merchantLevel: this.filter.merchantLevel,
          ...this.filter
        }
        delete params.status
        getAdminGetAuditNumber(params)
          .then((res) => {
            // const { total,waitingAudit, normal, blacklist,refused } = res.result;
            this.type[0].num = res.result.total
            this.type[1].num = res.result.normal;
            this.type[2].num = res.result.toStart;
            this.type[3].num = res.result.blacklist;
            this.type[4].num = res.result.abnormity;
            this.type[5].num = res.result.logout;
          })
          .finally(() => {
            this.loading = false;
          });
      },
      //禁用店铺
      getDisable(row) {
        const h = this.$createElement;
        var confirmButtonText = "下架";
        var status = "";
        var shopId = row.shopId;
        var shopName = row.shopName;
        console.log("this.data.status", row.shopStatus);
        if (row.shopStatus == "1") {
          confirmButtonText = "下架";
          status = "2";
        } else {
          confirmButtonText = "上架";
          status = "1";
        }
        this.$msgbox({
            title: `修改店铺状态`,
            message: h("p", null, [
              h(
                "span",
                // { style: "color: #1890ff" },
                // `确定要${confirmButtonText}该店铺`
                `确认是否将 ${shopName} ${confirmButtonText}`
              ),
            ]),
            showCancelButton: true,
            center: true,
            cancelButtonText: "取消",
            confirmButtonText: confirmButtonText,
            // type: "error",
          })
          .then(() => {
            var params = {
              id: shopId,
              status: status,
            };
            console.log(params, this.id);
            setshopStatus(params).then((res) => {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
              });
              setTimeout(() => {
                this._handleSuccess();
              }, 500);
            });
          })
          .catch(() => {});
      },
      _handleSuccess() {
        this.getList();
        this.getNum();
        this.detailDialog = false;
        this.regionDialog = false;
      },
      //重置
      setReset() {
        this.filter.areaId = '';
        this.filter.queryId = "";
        this.filter.query = "";
        this.filter.shopType = "";
        this.filter.shopTypeParent = "";
        this.filter.shopStatus = "";
        this.filter.type = "";
        this.filter.status = ""
        this.filter.source = ''
        this.filter.merchantLevel = ''
        this.filter.referrer = '' 
        this.filter.showType = ''
        this.showType = [] 
        this.currentNavtab = 0
        this.filter.startDate = ''
        this.filter.endDate = ''
        // this.filter.applyStatus = "";
        // this.filter.thirdMerchantNo = "";
        this.shopType = "";
        this.date = []
        this.pageOptions.pageNum = 1;
        this.$refs.table.pageOptions.pageNum = 1;
        this.getList();
        this.getNum()
      },
      //搜索
      search() {
        this.pageOptions.pageNum = 1;
        this.$refs.table.pageOptions.pageNum = 1;
        this.getList();
        this.getNum()
      },
      //编辑邀请人
      editInviter(row) {
        this.id = row.id;
        this.referrer = row.referrer;
        this.inviterDialog = true;
      },
      _handleInviterSuccess() {
        this.getList();
        this.inviterDialog = false;
      },
      //
      changeShopStatus(e,id){
        var params = {
          id: id,
          status: e,
        }
        kyyShopStatus(params).then((res) => {
          this.$message({
            message: "操作成功",
            type: "success",
            duration: 1500,
          });
        });
      },
      changeShenyeShopStatus(e,id){
        var params = {
          id: id,
          status: e,
        }
        syShopStatus(params).then((res) => {
          this.$message({
            message: "操作成功",
            type: "success",
            duration: 1500,
          });
        });
      },
    },
  };

</script>
<style lang="scss" scoped>
  @import "./style/merchantsList";

  .first_box {
    ::v-deep :nth-child(1).el-input__inner {
      width: 100px;
    }

    ::v-deep :nth-child(2).el-input__inner {
      width: 200px;
    }
  }

  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
  .zhezao{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #333;
    opacity: 0.6;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
    color: #1890ff;;
  }
</style>
